<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>座位选择</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="../../css/public.css" media="all" />
	<link rel="stylesheet" href="../../css/my.css" media="all" />
	<style>
		.item {
		width: 10%; 
		margin: 20px;
		background: #ccc;
		color: #fff;
		height:50px;
		line-height: 50px;
		text-align: center;
		}
		.item.active {
			background: red;
		}
		.item.current {
			background: green;
		}
	</style>	
</head>
<body class="childrenBody">

	<div class="layui-form one" lay-filter="LAY-form-list" style="padding: 20px 30px 0 0;">
  		<input type="hidden" name="id" value="${student.id}">
  		<div class="layui-col-xs5">
  		<div class="layui-form-item" >
			<label class="layui-form-label required">姓名:</label>
			<div class="layui-input-block" style="width:150px">
				<input type="text" name="name" id="itemname" value="${student.name}" lay-verify="required" class="layui-input" disabled="disabled" placeholder="姓名" />
			</div>
		</div>
		</div>
		<div class="layui-col-xs4">
		<div class="layui-form-item">
			<label class="layui-form-label required">日期</label>
			<div class="layui-input-block" style="width:150px">
				<input type="text" id="ctime" name="ctime" value="${student.ctime}"  class="layui-input" disabled="disabled"/>
			</div>
		</div>
		</div>
		
		<div class="layui-col-xs3">
		<div class="layui-btn layui-btn-lg" onclick="subFunc()" style="margin-left:45%">提交</div>
	    <div class="layui-form-item layui-hide">
	      	<input type="button" lay-submit lay-filter="LAY-form-submit" id="LAY-form-submit" value="确认添加">
	      	<input type="button" lay-submit lay-filter="LAY-form-edit" id="LAY-form-edit" value="确认编辑">
	    </div>
	    </div>		
		<div class="layui-form-item">
			<label class="layui-form-label required">座位号:</label>
			<div class="layui-input-block items" style="display: flex; flex-wrap: wrap">
				<input type="text" style="visibility: hidden;" name="id" value="" lay-verify="required" id="item-value" class="layui-input" placeholder="座位号" />

				 <c:forEach var="u" items="${seat}" varStatus="idx">
				 	<c:if test="${u.status==0}">
				 		<div class="item def" data-id="${u.id}">${u.num}</div>
				 	</c:if>
				 	<c:if test="${u.status==1}">
				 		<div class="item active">${u.num}</div>
				 	</c:if>
				 </c:forEach>
			 </div>
		</div>			    
  	</div>

	
<script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${path}/layui/layui.js"></script>
<script type="text/javascript" src="${path}/js/commons.js"></script>
<script>
layui.use(['form'],function(){
    var form = layui.form;
      
  	//监听提交
	form.on('submit(LAY-form-submit)', function(data) {
		console.log(data.form);
  		var index = parent.layer.getFrameIndex(window.name); 
  		$.ajax({
  			url: '${path}/action/student/save',
  			data: data.field,
  			success: function(json) {
  				parent.layui.table.reload('LAY-table');
  	      		parent.layer.close(index);	
  			}
  		});
	}); 


});
layui.use('laydate', function(){
	  var laydate = layui.laydate;
	  
	  //执行一个laydate实例
	  laydate.render({
			elem: '#ctime'
			,type: 'datetime'
			,value: new Date() //当前时间
			,isInitValue:true
		});	
	});
$('.items').on('click','.def',function(){
    $(this).addClass("current").siblings().removeClass("current");
     $('#item-value').attr('value',$(this).attr('data-id'));
    console.log($(this).attr('data-id'));
});
var subFunc = function() {
	var id = $('#item-value').val();
	var name = $('#itemname').val();
	var ctime = $('#ctime').val();
	console.log(id,name,ctime);
	$.ajax({
			url: '${path}/action/seat/update',
			type: 'GET',
			header: {"Content-type":"application/x-www-form-urlencoded"},
			data: {
				id: id,status:1,name: name, ctime: ctime
			},
			success: function(res) {
				layer.alert('选座成功，赶快来愉快地学习吧~',function(){
					window.location.href = "${path}/page/pmsg/pmsg_view.jsp";
				});
				
			}
		});
}
</script>
</body>
</html>